<template>
    <div class="index">
        <header>
            <h1> Vue.js   </h1>
        </header>
        
        <div class="container">
                <main class="main">
                    <h2>
                        Welcome to Vue.js
                    </h2>
                    <p>
                        Vue.js is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a full-featured framework.
                    </p>
                </main>
                <aside class="sidebar">
                    <a href="#/homeView" class="button-link">
                        进入微信
                    </a>
                    <a href="#/homeView" class="button-link">
                        进入QQ
                    </a>
                    <a href="#/homeView" class="sponsor-link">
                        become a sponsor
                    </a>
                </aside>
        </div> 
        
    </div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>
body * + * {
    margin-top: 1.5em;
}


.index {
    // width: 100%;
    // height: 100%;
    background-color: #eee;
}
header {
    padding: 1em 1.5em;
    // overflow: auto;
    color: #fff;
    background-color: #0072b2;
    border-radius: .5em;
}

.container {
    display: flex;
}
.main {
    // display: table-cell;
    // float: left;
    padding: 1em 1.5em;
    width: 70%;
    background-color: #fff;
    border-radius: .5em;
}
.sidebar {
    // display: table-cell;
    // float: left;
    width: 30% ;
    margin-top: 0;
    margin-left: 1.5em;
    padding: 1.5em;
    background-color: #fff;
    border-radius: .5em;
}
.button-link {
    display: block;
    // margin-top: 1.5em;
    padding: 0.5em;
    color: #fff;
    background-color: #0090C9;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.sponsor-link {
    display: block;
    color: #0072b0;
    font-weight: bold;
    text-decoration: none;
}


</style>